<template>
  <div>
    <div class="gva-form-box">
      <el-form :model="formData" ref="elFormRef" label-position="right" :rules="rule" label-width="80px">
        <el-form-item label="档案类型:" prop="typeId">
          <el-select v-model="formData.typeId" clearable placeholder="请选择">
            <el-option
                v-for="item in archiveTypeOptions"
                :key="item.ID"
                :label="item.name"
                :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="线下存放位置:" prop="locationId">
          <el-select v-model="formData.locationId" clearable placeholder="请选择">
            <el-option
                v-for="item in archiveLocationOptions"
                :key="item.ID"
                :label="item.name"
                :value="item.ID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="档案名称:" prop="name">
          <el-input v-model="formData.name" :clearable="true" placeholder="请输入档案名称"/>
        </el-form-item>
        <el-form-item label="档案文件:" prop="file">
          <SelectFile v-model="formData.file"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="save">保存</el-button>
          <el-button type="primary" @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {createArchiveFile, findArchiveFile, updateArchiveFile} from '@/api/archive/archiveFile'
// 自动获取字典
import {useRoute, useRouter} from "vue-router"
import {ElMessage} from 'element-plus'
import {reactive, ref} from 'vue'
import SelectFile from '@/components/selectFile/selectFile.vue'

defineOptions({
  name: 'ArchiveFileForm'
})

const route = useRoute()
const router = useRouter()

const type = ref('')
const formData = ref({
  typeId: 0,
  locationId: 0,
  name: '',
  file: [],
})
// 验证规则
const rule = reactive({
  typeId: [{
    required: true,
    message: '请选择档案类型',
    trigger: ['input', 'blur'],
  }],
  locationId: [{
    required: true,
    message: '请选择线下存放位置',
    trigger: ['input', 'blur'],
  }],
  name: [{
    required: true,
    message: '档案名称不能为空',
    trigger: ['input', 'blur'],
  }],
})

const elFormRef = ref()

// 初始化方法
const init = async () => {
  // 建议通过url传参获取目标数据ID 调用 find方法进行查询数据操作 从而决定本页面是create还是update 以下为id作为url参数示例
  if (route.query.id) {
    const res = await findArchiveFile({ID: route.query.id})
    if (res.code === 0) {
      formData.value = res.data.rearchiveFile
      type.value = 'update'
    }
  } else {
    type.value = 'create'
  }
}

init()
// 保存按钮
const save = async () => {
  elFormRef.value?.validate(async (valid) => {
    if (!valid) return
    let res
    switch (type.value) {
      case 'create':
        res = await createArchiveFile(formData.value)
        break
      case 'update':
        res = await updateArchiveFile(formData.value)
        break
      default:
        res = await createArchiveFile(formData.value)
        break
    }
    if (res.code === 0) {
      ElMessage({
        type: 'success',
        message: '创建/更改成功'
      })
    }
  })
}

// 档案类型
const archiveTypeOptions = ref([]);
const getArchiveTypeOptions = async () => {
  const options = await getArchiveTypeList({page: 1, pageSize: 9999})
  if (options.code === 0) {
    archiveTypeOptions.value = options.data.list
  }
}
getArchiveTypeOptions()

// 档案位置
const archiveLocationOptions = ref([]);
const getArchiveLocation = async () => {
  const options = await getArchiveLocationList({page: 1, pageSize: 9999})
  if (options.code === 0) {
    archiveLocationOptions.value = options.data.list
  }
}
getArchiveLocation()

// 返回按钮
const back = () => {
  router.go(-1)
}

</script>

<style>
</style>
